<template>
  <a-modal v-model="visible" title="填写手机联系人" @ok="handleOk" width="700px" @cancel="hideContact">
    <a-form-model
      ref="dynamicValidateForm"
      :model="dynamicValidateForm"
      v-bind="formItemLayoutWithOutLabel"
    >
      <a-form-model-item
        v-for="(domain, index) in dynamicValidateForm.domains"
        :key="domain.key"
        v-bind="index === 0 ? formItemLayout : {}"
        :label="index === 0 ? '联系人：' : ''"
      >
        <div class="aa">
          <a-input-group compact>
            <a-input placeholder="姓名" v-model="domain.name" :max-length="50"/>
            <a-input placeholder="手机号" v-model="domain.phone"/>
            <a-input placeholder="邮箱" v-model="domain.mail" :max-length="50"/>
          </a-input-group>

          <a-icon
            v-if="dynamicValidateForm.domains.length > 1"
            class="dynamic-delete-button"
            type="minus-circle-o"
            :disabled="dynamicValidateForm.domains.length === 1"
            @click="removeDomain(domain)"
          />
        </div>

      </a-form-model-item>

      <a-form-model-item v-bind="formItemLayoutWithOutLabel">
        <a-button type="dashed" style="width: 60%" @click="addDomain">
          <a-icon type="plus" /> 添加
        </a-button>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
export default {
  name: 'AddContact',
  props: {
    isShowContact: Boolean,
    contact: Array
  },
   data() {
    return {
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 }
        }
      },
      formItemLayoutWithOutLabel: {
        wrapperCol: {
          xs: { span: 24, offset: 0 },
          sm: { span: 20, offset: 4 }
        }
      },
      dynamicValidateForm: {
        domains: []
      },
      visible: null
    };
  },
  methods: {
    handleOk(e) {
      // 表单检验
      // console.log(this.dynamicValidateForm.domains);
      const aa = this.dynamicValidateForm.domains;
      for (let i = 0; i < aa.length; i++) {
        if (aa[i].main == '' || aa[i].name == '' || aa[i].phone == '') {
          this.$message.warning('请将内容填写完整！', 5);
          return;
        }
        // 检验手机号
         if (!(/^1[3|4|5|8][0-9]\d{8}$/.test(aa[i].phone))) {
            this.$message.warning('手机号有误，请重试', 5);
            return false;
          }
      }
      // console.log(JSON.stringify(aa));
      this.hideContact();
      this.$emit('getContact', aa);
      this.visible = false;
    },
    hideContact() {
      this.$emit('hideContact');
    },
    removeDomain(item) {
      const index = this.dynamicValidateForm.domains.indexOf(item);
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1);
      }
    },
    addDomain() {
      if (this.dynamicValidateForm.domains.length > 5) {
        this.$message.warning('人数超出限制');
        return;
      }
      this.dynamicValidateForm.domains.push({
        phone: '',
        key: Date.now(),
        name: '',
        mail: ''
      });
    },
    delContactChile(key) {
      for (let i = 0; i < this.dynamicValidateForm.domains.length; i++) {
        if (this.dynamicValidateForm.domains[i].key == key) {
          this.dynamicValidateForm.domains.splice(i, 1);
        }
      }
    }
  },
  watch: {
    isShowContact() {
      if (this.isShowContact) {
        this.visible = this.isShowContact;
      }
    }
  },
  created() {
    console.log(this.contact);
    if (this.contact.length) {
      this.dynamicValidateForm.domains.push(...this.contact);
    } else {
      this.addDomain();
    }
  }
};
</script>

<style scoped lang="less">
.dynamic-delete-button {
  cursor: pointer;
  position: relative;
  top: 4px;
  font-size: 24px;
  color: #999;
  transition: all 0.3s;
}
.dynamic-delete-button:hover {
  color: #777;
}
.dynamic-delete-button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
.aa{
  &>*:first-child{
    width: max-content;
    input{
      width: 150px;
    }
  }
  i{
    margin-left: 10px;
  }
}
</style>
